<template>
	<a-modal title="详情" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">

				<a-form-item label="id" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="" v-show="false">
					<a-input v-decorator="['sourceOrderId']" disabled />
				</a-form-item>

				<a-form-item label="入库单号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['rkOrderNumber']" disabled />
				</a-form-item>

				<a-form-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['warehousingTime']" disabled />
				</a-form-item>
				<!-- 
        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input v-decorator="['remark']" disabled/>
        </a-form-item> -->

				<div>
					<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
						:rowKey="(record) => record.code" :rowSelection="null" :showPagination="false">
						<template slot="materialModelNumber" slot-scope="text, record">
							{{ record.material ? record.material.materialModelNumber : '' }}
						</template>
						<!-- <span slot="image" slot-scope="text">
							<image-preview :images="text" />
						</span> -->
						<span slot="image" slot-scope="text,record">
							<image-preview1 :images="text" :imageUrl="record.imageUrl" />
						</span>
					</s-table>
				</div>

			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'

export default {
	components: {
		STable
	},
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			queryParam: {},  // 查询参数
			columns: [       // 表头
				{
					title: '序号', width: '80px',
					dataIndex: 'materialId',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '物料名称',
					dataIndex: 'materialName'
				},

				{
					title: '规格',
					dataIndex: 'materialModelNumber',
					scopedSlots: { customRender: 'materialModelNumber' }
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},

				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '数量',
					dataIndex: 'number'
				},
				{
					title: '备注',
					dataIndex: 'remark'
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
		}
	},
	methods: {
		init(record) {
			let _this = this
			this.visible = true
			this.queryParam.pageSize = -1
			this.queryParam.orderId = record.sourceOrderId
			setTimeout(() => {
				_this.form.setFieldsValue(record)
				_this.$refs.table.refresh()
			}, 100)
		},
		handleSubmit() {
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
		}
	}
}
</script>
